<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" width="'750px'" :before-close="cancel" :visible.sync="dialog" title="营业时间" >
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="营业日">
        <!--<el-input v-model="form.deliveryName" style="width: 370px;"/>-->
        <el-radio-group v-model="week" @change="weekChange" >
          <el-radio :label="0">每天营业</el-radio>
          <el-radio :label="1">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="week" >
          <div v-for="(item,index) in time.weekTime " style="margin-bottom: 10px;" :key="index" >
            <div v-for="(item1,index1) in item.time " style="margin-bottom: 10px;" :key="index1" >
            <el-checkbox  v-if="index1===0" v-model="item.check"></el-checkbox> <span>{{index1===0?item.name:''}}</span>
            <span :style="{'margin-left':index1!==0?'63px':''}" >

              <el-time-picker

                is-range
                value-format="HH:mm"
                format="HH:mm"
                v-model="item1.value"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </span>
            <i class="el-icon-circle-plus-outline"  @click="addTime(index)"  v-if="index1===0"></i>
            <i class="el-icon-remove-outline" @click ="removeTime(index1,index)"  v-if="index1!==0"></i>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="营业时间"  v-if="!week">
        <el-radio-group v-model="period"  @change="timeChange">
          <el-radio :label="0">全天</el-radio>
          <el-radio :label="1">选择时间段</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item  v-if="period&&!week">
        <div v-for="(item,index) in time.timeArr " style="margin-bottom: 10px;" :key="index" >
            <span >
              <el-time-picker
              value-format="HH:mm"
                is-range
                format="HH:mm"
                v-model="item.value"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </span>
            <i class="el-icon-circle-plus-outline"  @click="addTime()"   v-if="index===0"></i>
            <i class="el-icon-remove-outline"  @click ="removeTime(index)"   v-if="index!==0"></i>
          </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { goods } from '@/api/yxSystemPrize'
import { get } from '@/api/yxStoreOrder'
export default {
  data() {
    return {
      loading: false, dialog: false, express: [],
      week: 0,
				period: 0,
      form: {
        id: '',
        deliverySn: '',
        deliveryId: ''
      },
      time: {
					timeArr: [{value:[ "00:00","23:59"]  }], //每日固定时间
					weekTime: [
          // {
          //   check:true,
          //   day:1,
          //   name:"周一",
          //   time:[{value:[ "00:00","23:59"]  }]
          // }
          ], //自定义时间 //setWeekTime
				},
      rules: {
        unique: [
          { required: true, message: 'please enter', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    this.get()
    // this.setWeekTime()
  },
  methods: {
    //营业时间切换
    timeChange(e) {
				if (!e) {
					this.time.timeArr = [{value:[ "00:00","23:59"] }]
				}
			},
      //工作日切换
			weekChange(e) {
				if (!e) {
					this.setWeekTime()
				} else {
					this.period = 0
				}
			},
      //营业时间提交
    doSubmit(){
      console.log('time',this.time)
				let data = {}
				let weekList = this.time.weekTime
				let timeList = this.time.timeArr
				if (this.week == 1) {
					weekList.forEach((item, index) => {
						if (!item.check) return
						let stf = ''
						item.time.forEach((item1, index1) => {
              console.log('item1',item1)
							if (index1 != item.time.length - 1) {
								stf = stf + item1.value[0] + '-' + item1.value[1] + ','
							} else {
								stf = stf + item1.value[0] + '-' + item1.value[1]
							}

						})
						data[item.name] = stf
					})
				} else {
					weekList.forEach((item, index) => {

						let stf = ''
						timeList.forEach((item1, index1) => {
							if (index1 != timeList.length - 1) {
								stf = stf + item1.value[0] + '-' + item1.value[1] + ','
							} else {
								stf = stf + item1.value[0] + '-' + item1.value[1]
							}
						})
						data[item.name] = stf
					})
				}
        this.$parent.formValidate.dayTime=JSON.stringify(data)
        this.dialog=false
				console.log(data)

    },
    addTime(index) {
      if (index>=0) {
        	let arrLength = this.time.weekTime[`${index}`].time.length;
				if (arrLength >= 3) {
          this.$message('最多支持三组时间数据');

					return;
				}
				this.time.weekTime[`${index}`].time.push({value:[ "00:00","23:59"]  });
      }else{
        let arrLength = this.time.timeArr.length;
        if (arrLength >= 3) {
          this.$message('最多支持三组时间数据');
          return;
        }
      this.time.timeArr.push({ value:[ "00:00","23:59"] });
      }

			},
			removeTime(index1, index) {
        if (index>=0) {
          this.time.weekTime[`${index}`].time.splice(index1, 1);
        }else{
          this.time.timeArr.splice(index1, 1);
        }

			},
    cancel() {
      this.dialog=false
    },


    setWeekTime() {
				let weekTime = [],
					weekName = ['一', '二', '三', '四', '五', '六', '日'];
				for (let i = 0; i < 7; i++) {
					weekTime.push({
						check: true,
						day: i + 1,
						name: '周' + weekName[i],
						time: [ {value:[ "00:00","23:59"]  } ]
					})
				}
				this.time.weekTime = JSON.parse(JSON.stringify(weekTime));
        console.log('this.time.weekTime',this.time.weekTime)
				// this.time[1].weekTime = JSON.parse(JSON.stringify( weekTime));
			},
    get() {

    }
  }
}
</script>

<style scoped>

</style>
